<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

</style>
</head>
<body>
<input type="text" id="bookname"><button id="addBtn">增加</button>
<div id=""></div>
<input type="" name="" value="搜索" id="searchTxt"><button id="serBtn">搜索</button>
<ul id="booklist"></ul>
<script>
	//创建数组，获取元素（新增加的元素），添加li（给每一个li添加删除按钮） 
	 
var bookArr=[{bookName:"111111111"}];//数组添加bookname对象
var arr=[];
$("#serBtn")[0].addEventListener("click",function(){
    var searchTxt=$("#searchTxt")[0].value;
    if (searchTxt!="") {
        for (var i = 0; i < bookArr.length; i++) {
            if(bookArr[i].bookName.indexOf(searchTxt)!=-1){
                //读取符合搜索条件的数据
                arr.push(bookArr[i]);
            }
        }
        //过滤掉不等于searchTxt
        arr = bookArr.filter(function(item,index,arr){
        	//返回什么就是过滤什么（自己想的）
        	return item.bookName.indexOf(searchTxt)!=-1;
        })
        //过滤：去掉bu符合条件的元素，返回新的数组
        init(arr);
    }
})
/*
for(i++)//增加一个遍历次数i--
forEach()//
some(),every()//返回true||false
filter//返回新的数组
for( in )//最好用在object里面

15101189178
 */

function $(selector){//集合、类数组、数组对象
	return document.querySelectorAll(selector);//方便获取
}
// $()获取元素  

function init(arr){//初始化页面，将数据显示在页面列表
	for(var i=0;i<arr.length;i++){
		//循环bookArr中的每项，添加新加
		var li=document.createElement("li");
		//创建li
		li.innerHTML="书名:《"+arr[i].bookName+"》"+"<button>删除</button>";
		//给每个li添加删除按钮、项
		$("#booklist")[0].appendChild(li);
		console.log(arr);
	}
}
init(bookArr);//传入bookArr
function error(msg){//错误函数
	console.log(msg);
}
//？？？
function isInBookArr(arr,str){//检测数组中是否存在某数据
	return arr.some(function(item){//some某一项符合
		return item.bookName==str;//判断条件成不成立
	})
}
$("#addBtn")[0].addEventListener("click",function(){
	//获取第一个id名为addBtn的元素/添加/，并给他添加点击事件
	var b_value=$("#bookname")[0].value;
	// b... = 第一个input的value值；也就是输入值/现在为""/
	if(b_value==""){//input的value不能是空的
		error("不能为空")//文字填入上面
	}else if(isInBookArr(bookArr,b_value)){//第二个参数为输入的东西
		error("重复")//文字填入上面
	}else{
		bookArr.unshift({bookName:b_value});//给最上面的数组在前面添加对象 输入的内容
		var li=document.createElement("li");
		li.innerHTML="书名:《"+b_value+"》"+"<button>删除</button>";
		$("#booklist")[0].insertBefore(li,$("#booklist")[0].firstChild);//在列表前显示
		//注：$()里面传入的是要获取的元素
	}
})
function domIndex(domArr,dom){//返回点击按钮在按钮集合里的索引
	for(var i=0;i<domArr.length;i++){
		if(domArr[i]==dom){
			return i;
		}
	}
	return -1;
}
//事件委托，原理是事件冒泡
$("#booklist")[0].addEventListener("click",function(e){
	console.log(e.target.tagName)
	if(e.target.tagName=="BUTTON"){//e的目标是类名为 button的
		
		var index=domIndex($("#booklist button"),e.target);
		var index=domIndex($("#booklist")[0].getElementsByTagName("button"),e.target)
		bookArr.splice(index,1);
		this.removeChild($("#booklist li")[index]);
	}
})





</script>	
</body>
</html>

<!-- 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>


</style>
<body>
    <div>
        <p id="p"></p>
        <button id="button"></button>
        <input id="in" value="">
    </div>
</body>
<script type="text/javascript">
function $(a){//没记住啊
    return document.querySelectorAll(a);
}
$("#button")[0].innerText = "这是第一个按钮";//注意加下标
$("#p")[0].innerText = "改变前";

$("#button")[0].onclick = function(){
    timer = setInterval(function(){
        $("#p")[0].innerText = "改变后";
    },1000);
    console.log(timer);
}
var li = document.createElement("button")
li.innerText = "这是第二个按钮";
$("div")[0].appendChild(li);
li.onclick = function(){
  // clearInterval(timer); 
  $("#p")[0].innerText = "改变前";
}

var p = document.createElement("p");
$("div")[0].appendChild(p);

var arr = [1,2,3,1,54,56];
var arr2 = [1,3,15];
var Arr = [];
arr.filter(function(a,b,c){//1.数组2.下标3.数组
    for (var i = 0; i < arr.length; i++) {
    return a.arr[i].indexOf(arr2[1])!=-1;
    }
})

</script>
</html> -->